<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="￥ 126560">
            <!-- 插槽 -->
            <template slot="charts">
              <span>周同比 &nbsp;56.67% <i class="el-icon-caret-top"></i></span>
              <span>&nbsp;&nbsp;日同比 &nbsp;19.96% <i class="el-icon-caret-bottom"></i></span>
            </template>
            <template slot="footer">
              <span>日销售额 ￥ 12345</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="￥ 88460">
            <template slot="charts">
              <!-- 拆线图-->
              <LineChart></LineChart>
            </template>
            <template slot="footer">
              <span>日访问量 12345</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="￥ 88596">
            <!-- 插槽 -->
            <template slot="charts">
              <!-- 柱状图-->
              <barCharts></barCharts>
            </template>
            <template slot="footer">
              <span>转化率 &nbsp;56.67%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="￥ 54862">
            <!-- 插槽 -->
            <template slot="charts">
              <!-- 进度条图 -->
              <progressCharts></progressCharts>
            </template>
            <template slot="footer">
              <span>周同比 &nbsp;56.67% <i class="el-icon-caret-top"></i></span>
              <span>&nbsp;&nbsp;日同比 &nbsp;19.96% <i class="el-icon-caret-bottom"></i></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import LineChart from './lineChart'
import barCharts from './barCharts'
import progressCharts from './progressCharts'

export default {
  name: '',
  components: {
    Detail,
    LineChart,
    barCharts,
    progressCharts
  }
}
</script>
<style scoped>.card-header {
  display: flex;
  justify-content: space-between;
  color: #a7a3a5;
}

.card-content {
  font-size: 30px;
  padding: 10px 0;
}

.card-charts {
  height: 50px;
}

.card-footer {
  border-bottom: 1px solid #a7a3a5;
  padding: 5px 0;
}

</style>
